<script>
    estado_transaccion='<?php echo $estado_transaccion?>';    
        estado_correcto='La trasacción se ha completado exitosamente.';
        estado_incorrecto='<?php echo $msj?>';

</script>



<form name="form_social" method="post" action="<?php echo base_url()?>index.php/becarios/guardar_becario">
	<div id="wizard" class="swMain">
        <ul>
            <li>
                <a href="#step-1">
                    <span class="stepNumber">1<small>er</small></span>
                    <span class="stepDesc">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Paso<br/>
                        <small>&nbsp;Datos Generales</small>
                    </span>
                </a>
            </li>
            <li>
                <a href="#step-2">
                    <span class="stepNumber">2<small>do</small></span>
                    <span class="stepDesc">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Paso<br/>
                        <small>&nbsp;Datos de Contacto</small>
                    </span>
                </a>
            </li>
        </ul>
        <div id="step-1">	
            <h2 class="StepTitle">Ingreso de datos personales</h2>
			<p>
                <label for="carnet" id="lcarnet">Carnet: </label>
                <input type="text" name="carnet" id="carnet" class="tam-1" onblur="cargarAlumno(this.value)" />
            </p>
            <br><br>
            <div style="display:none">
                    <input id="nombre" name="nombre" type="text"/>
                    <input id="apellido" name="apellido" type="text"/>
                    <input id="carrera" name="carrera" type="text"/>
            </div>
            <div id="informacion"></div>
                     <p>
            <label for="sexo" id="lsexo" tabindex="3">Sexo </label>             
            <select id="sexo" name="sexo"  class="tam-1" >
                    <option value="m">Masculino</option>                                
                    <option value="f">Femenino</option>
            </select>
        </p>  
            

        </div>
        <div id="step-2">	
            <h2 class="StepTitle">Ingreso de información de contacto</h2>

                <p>
                    <label for="telefono" id="ltelefono">Telefono: </label>
                    <input type="text" name="telefono" size="10" id="telefono" class="tam-1"/>

                    <label id="lemail" for="email">E-mail: </label>
                    <input type="text" name="email" size="10" id="email" class="tam-2"/>
                </p>
                <p>
                <label id="lmunicipio" for="municipio">Municipio: </label>
                <select name="municipio" id="municipio" class="select" tabindex="6" placeholder="[Seleccione...]" style="width:275px;">
                <?php
                     foreach($municipios as $val) {
                         echo '<option value="'.$val['id'].'">'.ucwords($val['nombre']).'</option>';
                     }
                ?>
                </select>              
                <p>
                    <label for="comunidad"  id="lcomunidad">Comunidad: </label>
                    <input name="comunidad" id="comunidad" class="tam-2" type="text" />
                </p>
                <p>
                    <label for="direccion" class="label_textarea" id="ldireccion">Dirección: </label>
                    <textarea name="detalle" id="direccion" class="tam-3" row="2"> </textarea>
                </p>                   

        </div>
    </div>
</form>
<script language="javascript">

    $('#wizard').smartWizard();
    $("#carnet").validacion({lonMin:7, lonMax:7, men:"Debe de estar con el formato correcto (AA99999)", patt: /[A-Z]{2}[0-9]{5}/i});
    $("#nombre").validacion();
    $("#telefono").validacion({valTelefono:true})
    $("#email").validacion({valCorreo:true})
    //$("#municipio").validacion()
   $("#direccion").validacion()
    $("#sexo").kendoDropDownList();

var cnG="";
    function cargarAlumno(cn) {
    cn=cn.toUpperCase()
    $('#carnet').val(cn);
    if (cnG!=cn&&(cn.length>=7)) {
    $.ajax({
            async:  true, 
            url:    base_url()+"index.php/becarios/buscar_estudiante/"+cn,
            dataType:"json",
            success: function(data){
                 json = data;
               
                if(json.length!=0){
                    verificar_carrera(json[0].cod_carrera);
                    var html=  "<p><label>Estudiante</label> <strong>"+json[0].estudiante.capitalize()+"</strong></p>"+
                                "<p><label>Porcentaje carrera</label> <strong>"+json[0].porcentaje+"</strong></p>"+                                
                                "<p><label>Codigo Carrera</label> <strong>"+json[0].cod_carrera +
                                "&nbsp&nbsp <div id='noti'> </div> </strong></p>";                        
                    
                    document.getElementById('informacion').innerHTML=html;
                    document.getElementById('nombre').value=json[0].nombre.capitalize();
                    document.getElementById('apellido').value=json[0].apellido.capitalize();
                    document.getElementById('carrera').value=json[0].cod_carrera;
                    cnG=cn; 
                }else{
                    var html="<p><label></label> <strong> (No se encontron resultados)</strong></p>"
                    document.getElementById('informacion').innerHTML=html;
                    document.getElementById('nombre').value="";
                    document.getElementById('apellido').value="";
                    document.getElementById('carrera').value="";                  
                    cnG=""; 
                } 
                
                    
                },
            error:function(data){
                 alert('Error al cargar datos de alumnos');
                    console.log(data);
                }
            }); 
         }    
    }
    function verificar_carrera (carrera) {

        var html= "<a href='"+base_url()+"index.php/academica/carreras' target='_blank'><img src='"+base_url()+"/img/error.png'/>La carrera no se encuentra registrada</a>" ;

        $.ajax({
            async:  true, 
            url:    base_url()+"index.php/becarios/verificar_carrera/"+carrera,
            dataType:"json",
            success: function(data){

                    if(data.length!=0) {
                        $('#noti').html("");                        
                    }else{
                        $('#noti').html(html);                        
                    }


                },
            error:function(data){
                 alert('Error al verificar carrera');
                    console.log(data);
                }
            }); 


    }



</script>